import CommonDrawer from '@/components/CommonDrawer';
import ImageViewer from '@/components/ImageViewer';
import { Descriptions } from 'antd';
import styles from './index.less';

const Detail = (props) => {
  const { open, record, onCancel } = props;

  // 格式化数据用于展示
  // const formatData = (data) => {
  //   if (!data) return {};

  //   return {
  //     ...data,
  //     time: data.day ? dayjs(data.day).format('YYYY-MM-DD') : '-',
  //     remark: data.remark || '-',
  //   };
  // };

  // const formattedRecord = formatData(record);

  const items = [
    {
      key: 'groupName',
      label: '组织',
      children: record?.groupName || '-',
    },
    {
      key: 'license',
      label: '车牌号',
      children: record?.license || '-',
    },
    {
      key: 'realname',
      label: '司机',
      children: record?.realname || '-',
    },
    {
      key: 'phone',
      label: '电话',
      children: record?.phone || '-',
    },
    {
      key: 'price',
      label: '金额（元）',
      children: record?.price || '-',
    },
    {
      key: 'beginTime',
      label: '开始时间',
      children: record?.beginTime || '-',
    },
    {
      key: 'endTime',
      label: '结束时间',
      children: record?.endTime || '-',
    },
    {
      key: 'beginStation',
      label: '进入站点',
      children: record?.beginStation || '-',
    },
    {
      key: '离开站点',
      label: '进入站点',
      children: record?.endStation || '-',
    },
    {
      key: '用户名',
      label: 'username',
      children: record?.username || '-',
    },
    {
      key: 'time',
      label: '系统时间',
      children: record?.time || '-',
    },
    {
      key: 'remark',
      label: '备注',
      children: record?.remark || '-',
    },
  ];

  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width="100%"
      destroyOnHidden
      footer={null}
    >
      <div className={styles.container}>
        <div className={styles.left}>
          <h3>图片</h3>
          <ImageViewer urls={[record?.images]} />
        </div>
        <div className={styles.right}>
          <h3>报销单信息</h3>
          <Descriptions
            items={items}
            column={2}
            bordered
            size="middle"
            labelStyle={{
              fontWeight: 'bold',
              width: '160px',
              textAlign: 'right',
            }}
            contentStyle={{
              minHeight: '32px',
              padding: '8px 12px',
            }}
          />
        </div>
      </div>
    </CommonDrawer>
  );
};

export default Detail;
